<template>
  <div class="address">
    <Back :title="isEdit ? '编辑地址' : '新增地址'" />
    <div>
      <Bg>
        <van-address-edit
          :area-list="areaList"
          show-postal
          :show-delete="isEdit"
          show-set-default
          :area-columns-placeholder="['选择省', '选择市', '选择区/县']"
          :address-info="addressInfo"
          @save="saveAddress"
          @delete="deleteAddress"
        />
      </Bg>
    </div>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";

//省市区的数据
import { areaList } from "@vant/area-data";

export default {
  name: "Address",
  components: {
    Back,
    Bg,
  },

  data() {
    return {
      //地址aid
      aid: "",

      //省市区数据
      areaList,

      //是否编辑地址
      isEdit: false,

      //地址初始数据
      addressInfo: {},
    };
  },

  created() {
    let aid = this.$route.params.aid;

    if (aid) {
      this.isEdit = true;

      this.aid = aid;

      //如果是编辑地址, 则根据地址aid查询地址数据
      this.getAddressDataByAid(aid);
    }
  },

  methods: {
    //新增地址
    addAddrss(content) {
      //复制content, 再进行修改
      let data = { ...content };
      delete data.country;
      data.isDefault = Number(data.isDefault);

      // 
      // 
      this.axios({
        method: "post",
        url: "/addAddress",
        data,
      })
        .then((res) => {
          
          this.$toast(res.data.msg);

          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 9000) {
            this.$router.back();
          }
        })
        .catch((err) => {
                  });
    },

    //编辑地址
    editAddress(content) {
      
      
      let data = { ...content };
      delete data.country;

      //判断用户是否修改地址数据
      let isModify = false;
      for (let key in data) {
        if (data[key] !== this.addressInfo[key]) {
                    isModify = true;
          break;
        }
      }

      
      //如果已经修改
      if (!isModify) {
        return this.$toast("未修改地址数据");
      }

      //编辑地址参数
      let addressData = {
        aid: this.aid,
        name: data.name,
        tel: data.tel,
        province: data.province,
        city: data.city,
        county: data.county,
        addressDetail: data.addressDetail,
        areaCode: data.areaCode,
        postalCode: data.postalCode,
        isDefault: Number(data.isDefault),
      };

      
      this.axios({
        method: "post",
        url: "/editAddress",
        data: addressData,
      })
        .then((res) => {
          
          this.$toast(res.data.msg);

          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 30000) {
            this.$router.back();
          }
        })
        .catch((err) => {
                  });
    },

    //保存地址
    saveAddress(content) {
      if (this.aid) {
        //编辑地址
        this.editAddress(content);
      } else {
        //新增地址
        this.addAddrss(content);
      }
    },

    //根据地址aid查询地址数据
    getAddressDataByAid(aid) {
      this.axios({
        method: "get",
        url: "/findAddressByAid",
        params: {
          aid,
        },
      })
        .then((res) => {
          
          this.$toast(res.data.msg);

          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 40000) {
            let data = res.data.result[0];

            if (!data) {
              return this.$router.push({ name: "AddressList" });
            }

            data.isDefault = Boolean(data.isDefault);

            this.addressInfo = data;
          }
        })
        .catch((err) => {
                  });
    },

    //删除地址
    deleteAddress() {
            this.axios({
        method: "post",
        url: "/deleteAddress",
        data: {
          aid: this.aid,
        },
      })
        .then((res) => {
          
          this.$toast(res.data.msg);

          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 10000) {
            this.$router.back();
          }
        })
        .catch((err) => {
                  });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #0c34ba;
  border-color: #0c34ba;
}

/deep/ .van-switch--on {
  background-color: #ee0a24;
}

/deep/ .van-address-edit {
  padding: 0;
}
</style>